let { element, $ } = layui;
export default class Manage {
    constructor(next) {
        this.render();
        this.handle(next);
    }
    render() {
        let template = `
        <style>
           .backdrop{
            height: 700px;
            background-image: url('./img/img.jpeg');
            background-size: cover;
            padding-top: 60px;
           }
           .backdrop>h1{
            text-align: center;
            margin-top: 100px;
            font-size: 70px;
            color: white;
           }
           .backdrop>h2{
            padding-left: 100px;
          
            font-size: 50px;
            color: white;
           }
        </style>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo layui-hide-xs layui-bg-black">
                    猫眼后台管理系统
                </div>
               
                <ul class="layui-nav layui-layout-right">
                    <li
                        class="layui-nav-item layui-hide layui-show-md-inline-block"
                    >
                        <a href="javascript:;">
                           <span id="username"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">Your Profile</a></dd>
                            <dd><a href="">Settings</a></dd>
                            <dd><a id="logout" href="javascript:;">Sign out</a></dd>
                        </dl>
                    </li>
                    <li
                        class="layui-nav-item"
                        lay-header-event="menuRight"
                        lay-unselect
                    >
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-more-vertical"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="studentNav">
                    <li class="layui-nav-item">
                        <a href="#manage/usermanage">用户管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="#manage/infos">资讯管理</a>
                    </li>
                    <li class="layui-nav-item">
                    <a href="#manage/filmsManage">电影管理</a>
                    </li>
                    <li class="layui-nav-item">
                    <a href="#manage/cinema">院线管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="">电影院线匹配管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="#manage/hotShow">热映电影管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="#manage/soons">即将上映管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="#manage/hotPlay">热播影院管理</a>
                    </li>
                </ul>
            </div>
        </div>


            <div class="layui-body">
                <!-- 内容主体区域 -->
                <div id="content">
                <div class="backdrop">
                <h2>欢迎使用</h2>
                <h1>猫眼后台管理系统</h1>
                </div>
                </div>
            </div>

           
        </div>
        `;
        $("#root").html(template);
    }
    //判读用户是否登录成功并把用户名显示在页面上
    handle(next) {
        element.render();        
        $.ajax({
            type: "get",
            url: "/getSession",
            success(res) {
                if (!res.username) {
                    location.href = "#login";
                    return;
                }
                $("#username").html(res.username);
            }
        });
        //注销用户
        $("#logout").click(function () {
            $.ajax({
                type: "get",
                url: "/removeSession",
                success() {
                    location.href = "#login";
                }
            });
        })
        next();
       
    }
}